<template>
  <div class="back">
    <div id="blog_read">
      <el-page-header @back="goBack" content="文章显示"> </el-page-header>
      <div class="title">
        <h1>{{ this.listData.blog_title }}</h1>
      </div>
      <div class="time">
        <h3>时间：{{ this.listData.blog_date }}</h3>
      </div>
      <mavon-editor
        class="md"
        :value="this.listData.blog_content"
        :subfield="prop.subfield"
        :defaultOpen="prop.defaultOpen"
        :toolbarsFlag="prop.toolbarsFlag"
        :editable="prop.editable"
        :scrollStyle="prop.scrollStyle"
        :ishljs="true"
      />

      <div style="text-align: left; padding-top: 20px">评论列表</div>
      <el-divider></el-divider>
      <div v-for="(item, index) in comm" :key="index" class="weizhi">
        <el-card>
          <h4>{{ item.user_name }}:</h4>
          <p>{{ item.c.comment_content }}</p>
          <p>{{ item.c.comment_date }}</p>
        </el-card>
      </div>

      <div style="text-align: left; padding-top: 20px">发表评论</div>
      <el-divider></el-divider>
      <div style="text-align: left; padding-top: 20px; padding-bottom: 20px">
        <span class="el-icon-microphone"></span>用户:{{ user.user_name }}
      </div>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 9 }"
        placeholder="请输入内容"
        v-model="textarea2"
      >
      </el-input>
      <div style="text-align: right; padding-top: 20px; padding-bottom: 150px">
        <el-button type="primary" @click="pinglun()">评论</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { blogall, select, addcomm } from "../../api/blogapi";
import { blogcomm, add, commentall } from "../../api/commentapi";
export default {
  name: "blogshow",
  data() {
    return {
      id: "",
      user: {},
      listData: [],
      comm: [],
      textarea2: "",
      data: {
        comment_id: "",
        user_id: "",
        blog_id: "",
        comment_date: "",
        comment_content: "",
      },

      open() {
        ElMessage({
          showClose: true,
          message: "请登录，评论内容不能为空",
          type: "error",
        });
      },
    };
  },
  created() {
    if (Boolean(localStorage.getItem("userInfo"))) {
      this.user = JSON.parse(localStorage.getItem("userInfo"));
    } else {
      this.user = { user_name: "请先登录账户" };
    }
    this.commid();
    var id = this.$route.query.id;
    this.search(id);
  },
  computed: {
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true,
      };
      return data;
    },
  },

  methods: {
    goBack() {
      this.$router.push({ path: "/" });
    },

    search(id) {
      this.id = id;
      select(id).then((res) => {
        this.listData = res;
        this.listData.blog_content = this.htmlDecodeByRegExp(res.blog_content);
        this.listData.blog_date = this.GetDateFormat(this.listData.blog_date);
        blogcomm(id).then((res) => {
          this.comm = res;
          for (var i = 0; i <= res.length; i++) {
            this.comm[i].c.comment_date = this.GetDateFormat(
              this.comm[i].c.comment_date
            );
          }
        });
      });
    },
    GetDateFormat(str) {
      return new Date(parseInt(str.substr(6, 13))).toLocaleDateString();
    },
    htmlEncode(str) {
      var s = "";
      if (str.length == 0) return "";
      s = str.replace(/&/g, "&amp");
      s = s.replace(/</g, "&lt");
      s = s.replace(/>/g, "&gt");
      s = s.replace(/ /g, "&nbsp");
      s = s.replace(/\'/g, "&#39");
      s = s.replace(/\"/g, "&quot");
      return s;
    },
    htmlDecodeByRegExp(str) {
      var s = "";
      if (str.length == 0) return "";
      s = str.replace(/&amp;/g, "&");
      s = s.replace(/&lt/g, "<");
      s = s.replace(/&gt/g, ">");
      s = s.replace(/&nbsp;/g, " ");
      s = s.replace(/&#39;/g, "'");
      s = s.replace(/&quot;/g, '"');

      return s;
    },
    zeng(length) {
      return length + 1;
    },
    commid() {
      commentall().then((res) => {
        this.data.comment_id = "c" + this.zeng(res.length);
      });
    },
    getCurrentTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      return yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    pinglun() {
      if (Boolean(localStorage.getItem("userInfo")) && this.textarea2 != "") {
        this.data.comment_content = this.textarea2;
        this.data.user_id = this.user.user_id;
        this.data.blog_id = this.id;
        this.data.comment_date = this.getCurrentTime();
        console.log(this.data)
        add(this.data).then((res) => {
          console.log(res);
          if (res == 200) {
            addcomm(this.id).then((ress) => {
              this.commid();
              this.search(this.id);
            });
          }
        });
      } else {
        this.$message({
          type: "success",
          message: "请登录，评论内容不能为空",
        });
      }
    },
  },
};
</script>
<style >
#blog_read {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 90;
}
.weizhi {
  padding-top: 15px;
}
.dibu {
  width: 100%;
  height: 150px;
  border: 1 solid sienna;
  background: rgb(255, 255, 255);
}
.back {
  width: 100%;
  background-image: url("../../assets/img/10.jpg");
  background-position: center right;
  background-size: cover;
  color: #000;
}
</style>